<template>
	<view>
		<image class="image-bg" :src="srcX()"></image>
		<view class="page-bg">
			<form @submit="saveFormId">
				<view class="sub-bg">
					<image class="avater" :src="userInfo.avatarUrl"></image>
					<view class="tip">填写真实信息，以便自主认证</view>
					<view>
						<view class="section">
							<input @input="gainName" placeholder="您的真实姓名" name="name" placeholderClass="placeholder"
								type="text" :value="name"></input>
						</view>
						<view class="section">
							<input @input="gainPhone" maxlength="11" name="phone" placeholder="您的手机号"
								placeholderClass="placeholder" type="number"></input>
						</view>
						<view class="section">
							<input @input="gainCode" maxlength="6" name="code" placeholder="请输入验证码"
								placeholderClass="placeholder" type="number" style="width: 200rpx;" />
							<view class="send-code-btn" @click="sendSmsCode">
								{{codeDuration ? codeDuration + 's' : '获取验证码' }}></view>
						</view>
						<view>
							<button class="next" formType="submit">提 交</button>
						</view>
					</view>
				</view>
			</form>
		</view>
	</view>
</template>


<script>
	import {
		getVerifyCode,
		wxloginByNameAndPhone
	} from "@api"

	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex'

	export default {
		name: "authentification",
		data() {
			return {
				type: 1,
				codeDuration: 0,
				code: "",
				verifycode: "",
				realname: "",
				mobile: "",
				name: "", //注册的姓名
				phone: "", //注册的电话
				userInfo: null
			}
		},
		computed: {
			...mapState(['USER'])
		},
		onLoad: function(options) {
			//设置选则最大时间(当前年)
			this.userInfo = this.USER.userInfo;
			this.type = options.type;
			console.log("type:", options.type);
			console.log("userInfo:", this.userInfo);
		},
		methods: {
			...mapMutations("USER", ['setUserInfo', 'setToken']),
			//获取名字
			gainName(e) {
				console.log(e.detail.value);
				let that = this;
				that.name = e.detail.value;
			},
			//获取手机号
			gainPhone(e) {
				//console.log(e.detail.value)
				let that = this
				that.phone = e.detail.value
			},
			//获取验证码
			gainCode(e) {
				//console.log(e.detail.value)
				let that = this
				that.code = e.detail.value
			},
			async sendSmsCode() {
				let that = this;
				if (that.codeDuration) {
					uni.showModal({
						content: `请在${that.codeDuration}秒后重试`,
						showCancel: false
					})
				}
				if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(that.phone)) {
					uni.showModal({
						content: '手机号码填写错误',
						showCancel: false
					})
					return
				}
				await getVerifyCode({phone: that.phone}).then(res=>{
					if (res.resp.code == "OK") {
						uni.showToast({
						  title: "验证码发送成功，请注意查收...",
						  icon: 'loading',
						  duration:1000,
						  mask: true
						})
						that.codeDuration = 60;
						that.verifycode = res.code;
						that.codeInterVal = setInterval(() => {
							if (--that.codeDuration == 0) {
								if (that.codeInterVal) {
									clearInterval(that.codeInterVal);
									that.codeInterVal = null;
								}
							}
						}, 1000)
					} else {
						uni.showToast({
						  title: "验证码发送失败...",
						  icon: 'loading',
						  duration:1000,
						  mask: true
						})
					}
				})				
			},
			// 提交表单信息
			async saveFormId(e) {
				let that = this;
				let data = e.detail.value;
				let reslut = null;
				console.log("userinfo", that.userInfo);
				//if (data.code != "" && data.code == that.verifycode) {				
				if (1) {
					that.userInfo.avatarName = 'weixin';
					that.userInfo.phone = data.phone;
					that.userInfo.username = data.name;
					that.userInfo.wxNickName = that.type;
					await wxloginByNameAndPhone(that.userInfo).then(res=>{
						console.log("wxloginByNameAndPhone", res)
						if (res.user.verifyStatus == "0") {
							uni.showToast({
								title: '信息提交成功，等待审核！',
								icon: 'none',
								type: 'warning'
							})
							this.$Router.push({name:'perfectinfo', params:{type:that.type}});
						} else {
							uni.showToast({
								title: '完成认证，等待跳转',
								icon: 'none',
								type: 'warning'
							});
							that.setUserInfo(res.user);
							that.setToken(res.token);
							// this.$Router.push({name:'home'});
							uni.reLaunch({
								url: '/pages/home/home'
							});
						}
					});
					
				} else {
					uni.showToast({
					  title: "验证码错误...",
					  icon: 'loading',
					  duration:1000,
					  mask: true
					})
				}
				console.log(e)
			},
			//获取认证图片
			srcX: function() {
				return this.$t.URL.staticImg + '/selector.jpg';
			}
		}
	}
</script>

<style>
	.image-bg {
		position: fixed;
		width: 100%;
		height: 100%;
	}

	.page-bg {
		position: fixed;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.sub-bg {
		width: 544rpx;
		height: 730rpx;
		background: rgba(0, 0, 0, 0.45);
		border-radius: 18rpx;
	}

	.avater {
		margin-left: 212rpx;
		margin-top: 20rpx;
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
	}

	.tip {
		width: 100%;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		color: white;
		font-size: 28rpx;
	}

	.section {
		margin-left: 49rpx;
		margin-top: 20rpx;
		width: 446rpx;
		min-height: 76rpx;
		background-color: white;
		border-radius: 16rpx;
	}

	.form_button {
		background-color: white;
		padding: 0;
		margin: 0;
		text-align: left;
		color: rgb(51, 51, 51);
	}

	.section input {
		margin-left: 32rpx;
		width: 400rpx;
		height: 76rpx;
		line-height: 76rpx;
		font-size: 28rpx;
	}

	.send-code-btn {
		margin-left: 260rpx;
		margin-top: -58rpx;
		height: 56rpx;
		width: 180rpx;
		font-size: 32rpx;
		text-align: center;
		color: #555555;
		z-index: auto;
	}

	.placeholder,
	.address-placeholder {
		color: rgb(187, 187, 187);
	}

	.address-bg {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
	}

	.address-normal {
		margin-left: 32rpx;
		width: 360rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		padding-top: 20rpx;
		padding-bottom: 18rpx;
	}

	.department {
		color: rgb(187, 187, 187);
		margin-left: 32rpx;
		width: 360rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		padding-top: 20rpx;
		padding-bottom: 18rpx;
	}

	.address-arrow {
		margin-left: 5rpx;
		margin-top: 23rpx;
		width: 15rpx;
		height: 29rpx;
	}

	button {
		margin-left: 49rpx;
		margin-top: 32rpx;
		width: 446rpx;
		height: 76rpx;
		background-color: rgb(90, 160, 245);
		border-radius: 16rpx;
		color: white;
		font-size: 32rpx;
	}
</style>
